<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header-card">
      <view class="header">
        <view class="title-row">
          <text class="title">智慧农业基地-1号大棚</text>
          <uni-icons type="bottom" size="20" color="#666"></uni-icons>
        </view>

      </view>
    </view>

    <!-- 设备状态统计 -->
    <view class="status-section">
      <view class="chart-wrapper">
        <qiun-data-charts type="ring" :opts="ringOpts" :chartData="deviceStatusData"/>
        <view class="center-text">
          <text class="num">{{ totalDevices }}</text>
          <text class="label">设备总数(台)</text>
        </view>
      </view>
      <view class="status-grid">
        <view class="status-row">
          <view class="status-item">
            <text class="num online">{{ deviceStatusData.series[0].data[0].value }}</text>
            <text class="label">在线-运行</text>
          </view>
          <view class="status-item">
            <text class="num alarm">{{ deviceStatusData.series[0].data[1].value }}</text>
            <text class="label">在线-故障</text>
          </view>
        </view>
        <view class="status-row">
          <view class="status-item">
            <text class="num offline">{{ deviceStatusData.series[0].data[2].value }}</text>
            <text class="label">离线-正常</text>
          </view>
          <view class="status-item">
            <text class="num offline-alarm">{{ deviceStatusData.series[0].data[3].value }}</text>
            <text class="label">离线-故障</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 设备类型切换 -->
    <view class="device-tabs">
      <view class="tab-item" :class="{ active: activeTab === 'sensor' }" @click="switchTab('sensor')">
        <text>传感器</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'controller' }" @click="switchTab('controller')">
        <text>控制器</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'camera' }" @click="switchTab('camera')">
        <text>摄像头</text>
      </view>
    </view>

    <!-- 控制器列表 -->
    <view class="controller-list" v-if="activeTab === 'controller'">
      <view class="controller-item" v-for="item in controllers" :key="item.id">
        <view class="controller-info">
          <text class="name">{{ item.name }}</text>
          <text class="location">{{ item.location }}</text>
        </view>
        <view class="controller-actions">
          <switch :checked="item.status" color="#00ff7f"
                  @change="(e) => e.detail.value ? sendDeviceCommand(item.openDsid, item.openName, item.sdid) : sendDeviceCommand(item.closeDsid, item.closeName, item.sdid)"/>
          <button class="auto-btn" @click="setAutomation(item)">
            <uni-icons type="settings" size="14" color="#fff"></uni-icons>
            <text>设置自动化</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 摄像头列表 -->
    <view class="camera-list" v-show="activeTab === 'camera'">
      <view class="camera-item">
        <div id="video-container" class="camera-video"></div>

      </view>
    </view>

    <!-- 传感器列表 -->
    <view class="sensor-list" v-if="activeTab === 'sensor'">
      <view class="sensor-item" v-for="item in sensors" :key="item.id">
        <view class="sensor-info">
          <text class="name">{{ item.name }}</text>
          <text class="value">温度:{{ item.temperature }}{{ item.unit }}°C</text>
          <text class="value">湿度:{{ item.humidity }}{{ item.unit }}%</text>
          <text class="value">氮含量:{{ item.soilN }}{{ item.unit }}mg/kg</text>
          <text class="value">磷含量:{{ item.soilP }}{{ item.unit }}mg/kg</text>
          <text class="value">钾含量:{{ item.soilK }}{{ item.unit }}mg/kg</text>
        </view>
        <view class="sensor-status" :class="item.status">
          <text>{{ item.statusText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
import {
  getMonitorToken,
  getToken
} from '@/api/monitor/workShop';
import {
  listSensor
} from '@/api/sensor/sensor';

export default {
  components: {
    QiunDataCharts
  },
  data() {
    return {
      player: null,
      totalDevices: 0,
      activeTab: 'camera',
      themeData: {
        "header": {
          "color": "#1890ff",
          "activeColor": "#FFFFFF",
          "backgroundColor": "#000000",
          "btnList": [
            {
              "iconId": "deviceID",
              "part": "left",
              "defaultActive": 0,
              "memo": "顶部设备序列号",
              "isrender": 1
            },
            {
              "iconId": "deviceName",
              "part": "left",
              "defaultActive": 0,
              "memo": "顶部设备名称",
              "isrender": 1
            },
            {
              "iconId": "pantile",
              "part": "left",
              "defaultActive": 0,
              "memo": "云台控制按钮",
              "isrender": 1,
              "style": {
                "width": "12px",
                "height": "12px",
                "padding": "2px",
                "margin": "0 3px"
              }
            }
          ]
        },
        "footer": {
          "color": "#FFFFFF",
          "activeColor": "#1890FF",
          "backgroundColor": "#00000021",
          "style": {
            "zIndex": 1000,
            "position": "fixed",
            "bottom": "60px",
            "pointerEvents": "none"
          },
          "btnList": [
            {
              "iconId": "play",
              "part": "left",
              "defaultActive": 1,
              "memo": "播放",
              "isrender": 1
            },
            {
              "iconId": "capturePicture",
              "part": "left",
              "defaultActive": 0,
              "memo": "截屏按钮",
              "isrender": 1
            },
            {
              "iconId": "sound",
              "part": "left",
              "defaultActive": 0,
              "memo": "声音按钮",
              "isrender": 1
            },
            {
              "iconId": "pantile",
              "part": "left",
              "defaultActive": 0,
              "memo": "云台控制按钮",
              "isrender": 1
            },
            {
              "iconId": "recordvideo",
              "part": "left",
              "defaultActive": 0,
              "memo": "录制按钮",
              "isrender": 1
            },
            {
              "iconId": "talk",
              "part": "left",
              "defaultActive": 0,
              "memo": "对讲按钮",
              "isrender": 1
            },
            {
              "iconId": "zoom",
              "part": "left",
              "defaultActive": 0,
              "memo": "电子放大",
              "isrender": 1
            },
            {
              "iconId": "webExpend",
              "part": "right",
              "defaultActive": 0,
              "memo": "网页全屏按钮",
              "isrender": 1
            },
            {
              "iconId": "expend",
              "part": "right",
              "defaultActive": 0,
              "memo": "全局全屏按钮",
              "isrender": 1
            },
            {
              "iconId": "hd",
              "part": "right",
              "defaultActive": 0,
              "memo": "清晰度切换按钮",
              "isrender": 1,
              "style": {
                "marginRight": "50px"
              }
            },
            {
              "iconId": "exitExpend",
              "part": "right",
              "defaultActive": 0,
              "memo": "退出全屏按钮",
              "isrender": 1,
              "style": {
                "zIndex": 1001,
                "pointerEvents": "auto"
              }
            }
          ]
        }
      }, // 默认显示摄像头标签页
      ringOpts: {
        type: 'ring',
        canvasId: 'deviceStatus',
        background: '#FFFFFF',
        color: ['#00ff7f', '#ff4d4f', '#ffa940', '#bfbfbf'],
        padding: [0, 0, 0, 0],
        legend: false,
        title: false,
        subtitle: false,
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 1,
            centerColor: '#FFFFFF',
            linearType: 'none'
          }
        }
      },
      deviceStatusData: {
        series: [{
          data: [{
            name: '在线-运行',
            value: 0
          },
            {
              name: '在线-故障',
              value: 0
            },
            {
              name: '离线-正常',
              value: 0
            },
            {
              name: '离线-故障',
              value: 0
            }
          ]
        }]
      },
      controllers: [{
        id: 1,
        openDsid: '173752',
        openName: 'd_1',
        closeDsid: '173753',
        closeName: 'd_2',
        sdid: '14583',
        name: '1号水阀',
        location: '智慧农业基地-1号大棚',
        status: true
      },
        {
          id: 2,
          openDsid: '173754',
          openName: 'd_3',
          closeDsid: '173755',
          closeName: 'd_4',
          sdid: '14583',
          name: '2号水阀',
          location: '智慧农业基地-1号大棚',
          status: false
        },
        {
          id: 3,
          openDsid: '173752',
          openName: 'd_1',
          closeDsid: '173753',
          closeName: 'd_2',
          sdid: '15591',
          name: '3号水阀',
          location: '智慧农业基地-1号大棚',
          status: false
        },
        {
          id: 4,
          openDsid: '173754',
          openName: 'd_3',
          closeDsid: '173755',
          closeName: 'd_4',
          sdid: '15591',
          name: '4号水阀',
          location: '智慧农业基地-1号大棚',
          status: true
        },
      ],
      sensors: []
    }
  },
  methods: {
    async initVideo() {
      try {
        if (typeof EZUIKit === 'undefined') {
          console.error('EZUIKit未加载，请检查SDK是否正确引入');
          return;
        }

        // 如果播放器已存在且正在显示，则不需要重新初始化
        const container = document.getElementById('video-container');
        if (this.player && container && container.style.display !== 'none') {
          return;
        }

        const accessToken = await this.getToken();
        if (!accessToken) {
          console.error('获取accessToken失败');
          return;
        }

        if (this.player) {
          await this.destroy(this.player);
        }

        await this.$nextTick();

        this.player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container',
          accessToken: accessToken,
          url: 'ezopen://open.ys7.com/AD1441816/1.live',
          height: 400,
          videoId: 'video-container',
          themeData: this.themeData,
          objectFit: 'contain'
        });

      } catch (error) {
        console.error('初始化视频播放器失败:', error);
      }
    },

    destroy(player) {
      if (player) {
        player.destroy().then((data) => {
          console.log("视频销毁成功", data);
        });
      }
    },

    checkToken() {
      const tokenInfo = uni.getStorageSync('monitorToken');
      if (!tokenInfo) {
        return false;
      }
      const {
        token,
        expiresAt
      } = JSON.parse(tokenInfo);
      const now = new Date().getTime();
      if (now > expiresAt) {
        uni.removeStorageSync('monitorToken');
        return false;
      }
      return token;
    },

    async getToken() {
      try {
        const cachedToken = this.checkToken();
        if (cachedToken) {
          return cachedToken;
        }
        const res = await getMonitorToken();
        if (res && res.code === 200 && res.msg) {
          const tokenInfo = {
            token: res.msg,
            expiresAt: new Date().getTime() + 2 * 60 * 60 * 1000 // 2小时后过期
          };
          uni.setStorageSync('monitorToken', JSON.stringify(tokenInfo));
          return res.msg; // 修正：返回正确的token字段
        } else {
          console.error('获取token响应异常:', res);
          return null;
        }
      } catch (error) {
        console.error('获取token失败:', error);
        return null;
      }
    },

    async switchTab(tab) {
      const prevTab = this.activeTab;
      this.activeTab = tab;

      const container = document.getElementById('video-container');
      if (!container) return;

      if (tab === 'camera') {
        // 只在第一次加载时初始化播放器
        if (!this.player) {
          await this.$nextTick();
          await this.initVideo();
        } else {
          container.style.display = 'block';
        }
      } else if (prevTab === 'camera') {
        // 切换到其他标签时只隐藏视频容器
        container.style.display = 'none';
      }

      // 切换到任何标签页时都更新传感器数据和设备状态统计
      await this.fetchSensorData();
    },

    setAutomation(item) {
      console.log('设置自动化:', item.name)
    },

    checkDeviceToken() {
      const tokenInfo = uni.getStorageSync('deviceToken');
      if (!tokenInfo) {
        return false;
      }
      const {
        token,
        expiresAt
      } = JSON.parse(tokenInfo);
      const now = new Date().getTime();
      if (now > expiresAt) {
        uni.removeStorageSync('deviceToken');
        return false;
      }
      return token;
    },

    async getDeviceToken() {
      try {
        // 强制清除可能存在的旧token
        uni.removeStorageSync('deviceToken');

        const res = await getToken();
        if (res && res.code === 200 && res.msg) {
          const tokenInfo = {
            token: res.msg,
            expiresAt: new Date().getTime() + 2 * 60 * 60 * 1000 // 2小时后过期
          };
          uni.setStorageSync('deviceToken', JSON.stringify(tokenInfo));
          return res.msg;
        } else {
          console.error('获取设备token响应异常:', res);
          return null;
        }
      } catch (error) {
        console.error('获取设备token失败:', error);
        return null;
      }
    },

    async sendDeviceCommand(dsid, name, sdid) {
      try {
        const equipmentToken = await this.getDeviceToken();
        if (!equipmentToken) {
          uni.showToast({
            title: '获取认证token失败',
            icon: 'none'
          });
          return;
        }

        const response = await uni.request({
          url: 'https://cloud.bodazl.com:8090/api/v1/device/cmd',
          method: 'POST',
          header: {
            'x-token': equipmentToken,
            'Content-Type': 'application/json'
          },
          data: {
            cmd_content: `{"op":"set_dp","payload":{"data":[{"name":"${name}","dsid":${dsid},"value":255}],"sdid":${sdid}}}`,
            cmd_did: 49972,
            cmd_rw: "W",
            cmd_sdid: 14583,
          }
        });
        await uni.request({
          url: 'https://cloud.bodazl.com:8090/api/v1/device/cmd',
          method: 'POST',
          header: {
            'x-token': equipmentToken,
            'Content-Type': 'application/json'
          },
          data: {
            cmd_content: `{"op":"set_dp","payload":{"data":[{"name":"${name}","dsid":${dsid},"value":0}],"sdid":${sdid}}}`,
            cmd_did: 49972,
            cmd_rw: "W",
            cmd_sdid: 14583,
          }
        });
        if (response[1].data.code === 0) {
          uni.showToast({
            title: '命令发送成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '命令发送失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('发送设备命令失败:', error);
        uni.showToast({
          title: '发送命令失败',
          icon: 'none'
        });
      }
    },
    // async sendStopDeviceCommand(dsid, name) {
    //   try {
    //     const equipmentToken = await this.getDeviceToken();
    //     if (!equipmentToken) {
    //       uni.showToast({
    //         title: '获取认证token失败',
    //         icon: 'none'
    //       });
    //       return;
    //     }
    //
    //     const response = await uni.request({
    //       url: 'https://cloud.bodazl.com:8090/api/v1/device/cmd',
    //       method: 'POST',
    //       header: {
    //         'x-token': equipmentToken,
    //         'Content-Type': 'application/json'
    //       },
    //       data: {
    //         cmd_content: "{\"op\":\"set_dp\",\"payload\":{\"data\":[{\"name\":\"d_2\",\"dsid\":173753,\"value\":255}],\"sdid\":14583}}",
    //         cmd_did: 49972,
    //         cmd_rw: "W",
    //         cmd_sdid: 14583,
    //       }
    //     });
    //     await uni.request({
    //       url: 'https://cloud.bodazl.com:8090/api/v1/device/cmd',
    //       method: 'POST',
    //       header: {
    //         'x-token': equipmentToken,
    //         'Content-Type': 'application/json'
    //       },
    //       data: {
    //         cmd_content: "{\"op\":\"set_dp\",\"payload\":{\"data\":[{\"name\":\"d_2\",\"dsid\":173753,\"value\":0}],\"sdid\":14583}}",
    //         cmd_did: 49972,
    //         cmd_rw: "W",
    //         cmd_sdid: 14583,
    //       }
    //     });
    //     if (response[1].data.code === 0) {
    //       uni.showToast({
    //         title: '命令发送成功',
    //         icon: 'success'
    //       });
    //     } else {
    //       uni.showToast({
    //         title: '命令发送失败',
    //         icon: 'none'
    //       });
    //     }
    //   } catch (error) {
    //     console.error('发送设备命令失败:', error);
    //     uni.showToast({
    //       title: '发送命令失败',
    //       icon: 'none'
    //     });
    //   }
    // },
    updateDeviceStatus() {
      // 计算设备总数
      const totalDevices = this.controllers.length + this.sensors.length;

      // 初始化状态计数
      let onlineRunning = 0;
      let onlineFault = 0;
      let offlineNormal = 0;
      let offlineFault = 0;

      // 统计传感器状态
      this.sensors.forEach(sensor => {
        const hasData = sensor.temperature !== null ||
            sensor.humidity !== null ||
            sensor.soilN !== null ||
            sensor.soilP !== null ||
            sensor.soilK !== null;

        const hasZeroData = (sensor.temperature === 0 || sensor.humidity === 0 ||
            sensor.soilN === 0 || sensor.soilP === 0 ||
            sensor.soilK === 0);
        const hasNullData = (sensor.temperature === null || sensor.humidity === null ||
            sensor.soilN === null || sensor.soilP === null ||
            sensor.soilK === null);

        if (hasData) {
          if (hasZeroData || hasNullData) {
            onlineFault++;
          } else {
            onlineRunning++;
          }
        } else {
          offlineNormal++;
        }
      });

      // 统计控制器状态
      this.controllers.forEach(controller => {
        if (controller.status) {
          onlineRunning++;
        } else {
          offlineNormal++;
        }
      });

      // 更新环形图数据
      this.deviceStatusData.series[0].data = [{
        name: '在线-运行',
        value: onlineRunning
      },
        {
          name: '在线-故障',
          value: onlineFault
        },
        {
          name: '离线-正常',
          value: offlineNormal
        },
        {
          name: '离线-故障',
          value: offlineFault
        }
      ];

      // 更新设备总数
      this.totalDevices = totalDevices;
    },

    async fetchSensorData() {
      try {
        const now = new Date();
        const fiveMinutesAgo = new Date(now.getTime() - 5 * 60 * 1000);

        // 格式化时间为 YYYY-MM-DD HH:mm:ss
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };

        const response = await listSensor({
          pageNum: 1,
          pageSize: 1000,
          startTime: formatDate(fiveMinutesAgo),
          endTime: formatDate(now)
        });

        if (response && response.rows) {
          const latestData = {};
          let onlineRunning = 0;
          let onlineFault = 0;
          let offlineNormal = 0;

          // 获取每个传感器最新的数据
          response.rows.forEach(item => {
            if (!latestData[item.name] || new Date(item.timestamp) > new Date(latestData[item
                .name].timestamp)) {
              latestData[item.name] = item;
            }
          });

          // 更新传感器状态
          this.sensors = Object.keys(latestData).map(sensorName => {
            const sensorData = latestData[sensorName];
            const hasData = sensorData.temperature !== null ||
                sensorData.humidity !== null ||
                sensorData.soilN !== null ||
                sensorData.soilP !== null ||
                sensorData.soilK !== null;

            const hasZeroData = (sensorData.temperature === 0 || sensorData.humidity === 0 ||
                sensorData.soilN === 0 || sensorData.soilP === 0 ||
                sensorData.soilK === 0);
            const hasNullData = (sensorData.temperature === null || sensorData.humidity === null ||
                sensorData.soilN === null || sensorData.soilP === null ||
                sensorData.soilK === null);
            if (hasData) {
              if (hasZeroData || hasNullData) {
                onlineFault++;
              } else {
                onlineRunning++;
              }
            } else {
              offlineNormal++;
            }

            return {
              id: sensorData.id,
              name: sensorData.name,
              temperature: sensorData.temperature,
              humidity: sensorData.humidity,
              soilN: sensorData.soilN,
              soilP: sensorData.soilP,
              soilK: sensorData.soilK,
              status: hasData ? (hasZeroData || hasNullData ? 'warning' : 'normal') : 'offline',
              statusText: hasData ? (hasZeroData || hasNullData ? '在线-故障' : '在线-运行') : '离线-正常'
            };
          });

          // 更新设备状态统计
          this.deviceStatusData.series[0].data = [{
            name: '在线-运行',
            value: onlineRunning
          },
            {
              name: '在线-故障',
              value: onlineFault
            },
            {
              name: '离线-正常',
              value: offlineNormal
            },
            {
              name: '离线-故障',
              value: 0
            }
          ];
          // 更新设备总数
          this.totalDevices = onlineRunning + onlineFault + offlineNormal;
          console.log(this.deviceStatusData.series[0].data)
        }
      } catch (error) {
        console.error('获取传感器数据失败:', error);
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      if (this.activeTab === 'camera') {
        this.initVideo();
      }
      this.updateDeviceStatus();
      this.fetchSensorData();
      // 设置定时器，每5分钟更新一次传感器数据
      this.timer = setInterval(() => {
        this.fetchSensorData();
      }, 5 * 60 * 1000);
    });
  },

  beforeDestroy() {
    if (this.player) {
      this.destroy(this.player);
    }
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style lang="scss">
.camera-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  position: relative;
  overflow: hidden;
  background: #000;

  #video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .title-row {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .data-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 28rpx;
  }
}

.status-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .chart-wrapper {
    position: relative;
    height: 400rpx;
    margin-bottom: 30rpx;

    .center-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .num {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        display: block;
      }

      .label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .status-grid {
    .status-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .status-item {
      text-align: center;

      .num {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 6rpx;

        &.online {
          color: #00ff7f;
        }

        &.alarm {
          color: #ff4d4f;
        }

        &.offline {
          color: #ffa940;
        }

        &.offline-alarm {
          color: #bfbfbf;
        }
      }

      .label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.device-tabs {
  display: flex;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;

    &.active {
      color: #00ff7f;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #00ff7f;
        border-radius: 2rpx;
      }
    }
  }
}

.controller-list {
  .controller-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .controller-info {
      .name {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .location {
        font-size: 24rpx;
        color: #999;
      }
    }

    .controller-actions {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .auto-btn {
        display: flex;
        align-items: center;
        gap: 6rpx;
        background: #00ff7f;
        border: none;
        border-radius: 30rpx;
        padding: 15rpx 30rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
}

.camera-list {
  .camera-item {
    .camera-video {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
      margin-bottom: 16rpx;
      background: #000;
    }

    :deep(.ezuikit-video-player) {
      .ptz-control {
        transform: scale(0.6) !important;
        transform-origin: bottom right;
        right: 10px !important;
        bottom: 10px !important;
      }
    }

    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .camera-image {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
      margin-bottom: 16rpx;
    }

    .camera-name {
      font-size: 28rpx;
      color: #333;
      padding: 0 10rpx;
    }
  }
}

.sensor-list {
  .sensor-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sensor-info {
      .name {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .value {
        font-size: 28rpx;
        color: #666;
      }
    }

    .sensor-status {
      padding: 8rpx 20rpx;
      border-radius: 30rpx;
      font-size: 24rpx;

      &.normal {
        background: #e8f7ed;
        color: #00ff7f;
      }

      &.warning {
        background: #fff2e8;
        color: #ffa940;
      }

      &.error {
        background: #fff1f0;
        color: #ff4d4f;
      }
    }
  }
}
</style>
